<template>
	<view class="content ">
		<view class="options">
			<view class="d-flex">
				<text>持卡人</text>
				<input type="text" v-model:value="username" placeholder="姓名">
			</view>
		</view>

		<view class="options  justify-content-between">
			<view class="">
				<text>银行</text>
				<input type="text" placeholder="请选择">
			</view>
			<uni-icons type="arrowright"></uni-icons>
		</view>
		<view class="options  justify-content-between">
			<view>
				<text>卡类型</text>
				<input type="text" placeholder="请选择">
			</view>
			<uni-icons type="arrowright"></uni-icons>
		</view>

		<view class="options">
			<view class="d-flex">
				<text>卡号</text>
				<input type="text" placeholder="请输入卡号">
			</view>
		</view>
		<view class="options">
			<view>
				<text>手机号</text>
				<input type="text" placeholder="请输入银行预留手机号">
			</view>
		</view>


		<view class="options">
			<label class="radio">
				<radio :checked="flag" @click="flag=!flag" value="" /><text>已阅读并同意</text>《用户协议》
			</label>
		</view>

		<view class="footer">
			<button @tap="send" :style="{backgroundColor:bg}" class="btn">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg:'red',
				username:'谭延钊',
				flag:false
			}
		},
		methods: {
			send(){
				if(this.flag == false){
					uni.showToast({
							title:"请勾选协议",
							icon:"none",
							position :"bottom"
					})
				}else{
					console.log('确认')
				}
			},//按钮
		},
		watch:{
			username(news,old){
				if(news !== '' && this.flag == true){
					this.bg = 'red'
				}else {
					this.bg = '#EC7882'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.footer{
			width: 690rpx;
			height: 80rpx;
			margin: 40upx auto;
			.btn {
				color: white;
			}
		}
		
	//按钮
	.options:nth-last-child(1) {
		border-bottom: none;
	}

	.options view input {
		font-size: 30upx;
		color: #333333;
		color: black;
		// font-family:"Times New Roman",Times,serif;	
		text-indent: 1rem;
	}

	.options view text {
		width: 100upx;
		font-size: 30upx;
	}

	.options {
		display: flex;
		align-items: center;
		padding: 0 30upx;
		border-bottom: 1px solid #ececec;
		height: 100upx;
		background-color: #fff;

		view {
			display: flex;
		}
	}
	page{
		background-color: #F2F1F2;
	}
</style>
